<script setup lang="ts">

const props=defineProps<{
  id:string,
  from:string,
  to:string,
  startDistance:number|null,
  endDistance:number|null,
  suitability:string|null,
  userAlias:string|null,
  departureTime:Date,
  avatar:string|null,
  quality:number,
}>()
let config=useRuntimeConfig()
function replaceURL(url:string):string{
  if(url===config.public.defaultUserAvatarURL)return url
  return config.public.enableReplaceImgURL?url.replace(config.public.oldImgHost,config.public.newImgHost):url
}

function goChat(tripId: string,userAlias:string|null) {
  navigateTo({
    path:'/stroke/passenger/detail/chat',
    query:{
      tripId: tripId,
      userAlias:userAlias,
    }
  })
}
</script>

<template>
  <div class="card">
    <div class="img-area">
      <van-image
          round
          width="3.7rem"
          height="3.7rem"
          fit="cover"
          :src="replaceURL(avatar?avatar:config.public.defaultUserAvatarURL)"
      />
    </div>

    <div class="info-area">
      <h3>{{ userAlias }}<span class="match" v-if="suitability">{{Number(suitability).toFixed(2)}}%顺路</span></h3>
      <span>始：{{from}} <span class="distance">{{startDistance}}km</span></span>
      <span>终：{{to}} <span class="distance">{{endDistance}}km</span></span>
      <span>出行日期：<span class="distance">{{departureTime.getFullYear()}}年{{departureTime.getMonth()+1}}月{{departureTime.getDate()}}日 {{departureTime.getHours().toString().padStart(2,'0')}}:{{departureTime.getMinutes().toString().padStart(2,'0')}}</span></span>
      <span>剩余座位数：{{quality}}</span>
    </div>

    <div class="action-area">
      <van-icon size="30px" name="chat-o" @click="goChat(id,userAlias)"/>
    </div>
  </div>
  <slot name="default"></slot>
</template>

<style scoped>

.card {
  display: flex;
  position: relative;
  width: 100%;
  border-bottom: 1px dashed grey;
}

.img-area {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-area {
  flex: 3.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px;
}

.info-area > span {
  font-size: 0.8rem;
}

.info-area h3 {
  margin: 6px 0;
}

.match {
  position: relative;
  left: 6%;
  color: #ae820b;
}

.distance {
  color: #ae820b;
}

.action-area {
  flex: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>